import emitter from "../utils/eventbus";
import * as d3 from "d3";
import d3DrawStore from "../store/modules/d3Draw";

export function initLiner($: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number) {
    let id: string = $.attr("id");
    const d3Canvas = d3CanvasRef;//画布信息
    const widthCenter = d3Canvas.offsetWidth / 2 //中心线
    const yScale = d3DrawStore().scale
    const start = yScale(heightStart)
    const end = yScale(heightEnd)

    const liner = $.append("rect")
        .attr("x", widthCenter - width / 2)  // 矩形左上角的 x 坐标
        .attr("y", start)  // 矩形左上角的 y 坐标
        .attr("width", width)  // 矩形的宽度
        .attr("height", end)  // 矩形的高度
        .attr("fill", "black");  // 填充颜色

    emitter.on(id, (transform: any) => {
        liner.attr("transform", transform);
    });

    return liner
}

export function updataLiner(liner: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number) {
    const widthCenter = d3CanvasRef.offsetWidth / 2 //中心线\
    const triangleSize = 10; // 三角形的大小
    const yScale = d3DrawStore().scale
    const start = yScale(heightStart)
    const end = yScale(heightEnd)
    liner.attr("x", widthCenter - width / 2)  // 矩形左上角的 x 坐标
    .attr("y", start)  // 矩形左上角的 y 坐标
    .attr("width", width)  // 矩形的宽度
    .attr("height", end)  // 矩形的高度
    .attr("fill", "black");  // 填充颜色
    return liner;
}

export function deleteLiner(liner: any){
    liner.remove();
}